<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>演示：HTML5点播m3u8(hls)格式视频</title>
  <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
</head>
<body>    
    <video id="video"></video>
    <script>
      if(Hls.isSupported()) {
        var video = document.getElementById('video');
        var hls = new Hls();
        hls.loadSource('http://192.168.4.180:6677/mytest/playlist.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function() {
          video.play();
      });
     }
    </script>
</body>
</html>